<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, minimum-scale=1">
    <title>神威</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-image: url('../resource/img/111.png');
        background-position: top left;
        background-repeat: no-repeat;
        background-clip: border-box;
        background-origin: border-box;
        background-size: auto;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        transition: 0.4s;
    }

    .rotating-background1,
    .rotating-background2,
    .rotating-background3 {
        position: absolute;
        overflow: hidden;
        border-radius: 50%;
        background-repeat: no-repeat;
        transition: 0.4s;
    }

    .rotating-background1 {
        left: 40vw;
        top: 50vh;
        width: 50vw;
        height: 50vw;
        box-shadow: 0 0 20px 2px white;
        background-image: url('../resource/img/111.png');
        background-position: -40vw -50vh;
        /* animation: rotateSection1 2s 1 linear; */
    }

    .rotating-background2 {
        left: 47vw;
        top: calc(50vh + 7vw);
        width: 36vw;
        height: 36vw;
        box-shadow: 0 0 10px 2px white;
        background-image: url('../resource/img/111.png');
        background-position: -47vw calc(-50vh - 7vw);
        /* animation: rotateSection2 2s 1 linear; */

    }

    .rotating-background3 {
        left: 52.5vw;
        top: calc(50vh + 12.5vw);
        width: 25vw;
        height: 25vw;
        box-shadow: 0 0 5px 2px white;
        background-image: url('../resource/img/111.png');
        background-position: -52.5vw calc(-50vh - 12.5vw);
        /* animation: rotateSection3 2s 1 linear; */
    }

    @keyframes rotateSection1 {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes rotateSection2 {
        to {
            transform: rotate(-360deg);
        }
    }

    @keyframes rotateSection3 {
        25% {
            transform: rotate(60deg);
        }

        50% {
            transform: rotate(180deg);
        }

        75% {
            transform: rotate(240deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
</style>

<body>
    <div id="r1" class="rotating-background1"></div>
    <div id="r2" class="rotating-background2"></div>
    <div id="r3" class="rotating-background3"></div>
</body>
<script type="text/javascript">
    var i = 0;
    var pics = ['../resource/img/111.png','../resource/img/222.png','../resource/img/333.png','../resource/img/444.png'];
    function startTurns() {
        i++; if (i >= pics.length) { i = 0; }
        document.getElementById("r1").style.animation = 'none';
        document.getElementById("r2").style.animation = 'none';
        document.getElementById("r3").style.animation = 'none';

        setTimeout(() => {
            document.getElementById("r1").style.animation = 'rotateSection1 2s 1 linear';
            document.getElementById("r2").style.animation = 'rotateSection2 2s 1 linear';
            document.getElementById("r3").style.animation = 'rotateSection3 2s 1 linear';
            setTimeout(() => {
                var url = "url('" + pics[i] + "')";
                document.body.style.backgroundImage = url;
                document.getElementById("r1").style.backgroundImage = url;
                document.getElementById("r2").style.backgroundImage = url;
                document.getElementById("r3").style.backgroundImage = url;
            }, 1600);
        }, 2000);
    }
    // 4秒一轮动画
    startTurns();
    setInterval(() => {
        startTurns();
    }, 4000);
</script>

</html>